<template>
  <div class="tops">
    <el-row class="w mar_con">
      <el-col :span='15'>
        <!-- 文章内容 -->
        <el-card class="box-card">
          <div class="content_right">
            <h2>{{detaillist.title}}</h2>
            <div class="content_si">
              <p>
                <i class="el-icon-edit"></i>
                <span>{{detaillist.author}}</span>
              </p>
              <p>
                <i class="el-icon-microphone"></i>
                <span>{{detaillist.podcast}}</span>
              </p>
              <p>
                <i class="el-icon-time"></i>
                <span>{{detaillist.duration}}</span>
              </p>
              <p>
                <i class="el-icon-service"></i>
                <span>{{detaillist.play_time}}</span>
              </p>
            </div>
            <div class="content_p" v-html="detaillist.content"></div>
          </div>
        </el-card>
        <!-- 标签 -->
        <el-card class="box-card-labels">
          标签：<span v-for="(item,index) of detaillist.labels" :key='index'>{{item}}</span>
        </el-card>
        <!-- 切换 -->
        <!-- <div class="text">
          <el-button type="text" icon="el-icon-arrow-left">上一页</el-button>
          <el-button type="text">上一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div> -->
        <!-- 发表评论 -->
        <div class="pl">
          <div class="pl_1">
            <el-input v-model="user.input" placeholder="请输入内容"></el-input>
          </div>
          <div class="pl_2">
            <el-button type="danger" @click="fabiao">评论</el-button>
          </div>
        </div>

        <!-- 评论 -->
        <el-card class="box-card mar_bot">
          <div  slot="header">
            <span style="color:red">最新评论({{comments.length}})</span>
          </div>
          <ul v-if="comments.length" style="margin:0;padding:0">
            <li v-for="(item,index) of comments" :key='index'>
              <el-row style="margin:10px 0;padding:10px 0">
                <el-col :span='2'>
                  <img src="../assets/images/1_03.png" alt="">
                </el-col>
                <el-col :span='21'>
                  <div>
                   <span style="font-size:13px;margin-right:14px">{{item.nikiname}}</span>
                   <span style="font-size:12px;color:#999">{{item.createdTime}}</span>
                  </div>
                  <div class="contents_comments">{{item.content}}</div>
                </el-col>
                <el-col :span='1' v-if='user.user_id==item.user_id'><i @click="deletecomment(item.id)" class="el-icon-delete"></i></el-col>
              </el-row>
            </li>
          </ul>
          <div v-else>暂无评论</div>
        </el-card>
      </el-col>
      <el-col :span='8'>
        <el-card>
           <div class="right_img">
             <el-avatar shape="square" :size="80">
                <img  src="../assets/images/tu2_03.gif" alt="">
             </el-avatar>
             <div class="right_title">
               <p class="right_title_1">
                <span>{{detaillist.podcast}}</span>
                <i class="el-icon-microphone"></i>
              </p>
              <div class="right_zp">
                <div>
                  <p>作品：7</p>
                  <p>粉丝：44</p>
                </div>
                <el-button type='danger'>关注</el-button>
              </div>
             </div>
           </div>
        </el-card>
        <el-card class="marting_top author">
          <div slot="header" class="titles">
            <span>作者相关的作品 TOP 10</span>
          </div>
          <div v-for="(item,index) of authororder" :key="index" class="text item">
            <h4 style="font-size:14px" class="shou"   @click="detailid(item.id)">{{index+1}}.{{item.title}}</h4>
            <p style="font-size:13px;color:#999">文：<span>{{item.author}}</span> 主播：<span>{{item.podcast}}</span></p>
          </div>
        </el-card>
        <el-card class="marting_top" :body-style='{padding:0,fontSize:0}' shadow='false'>
          <img style="width:100%" src="../assets/images/tu7_03.gif" alt="">
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'detail',
  data(){
      return{
        // 详情信息
          detaillist:{},
          // 发表评论
          user:{
            input:'',
            // 当前用户id
             user_id:'',
             nikiname:''
          },
        // 评论信息
        comments:[],
        // 作者的其他作品
        authororder:[]
      }
  },
  methods:{
    // 获取文章详情
      getdetail(){
          this.$axios.get('/getdetaild',{params:{id:this.$route.params.pageid}}).then(res=>{
              this.detaillist=res.data.list[0]
              this.detaillist.labels=res.data.list[0].labels.split(',')
              this.getcomments(res.data.list[0].id)
              this.getauthororder(res.data.list[0].author)
          })
      },
          // 获取评论
    getcomments(id){
      this.$axios.get('/getcomment',{params:{id:id}}).then(res=>{
        if(res.data.meat.status!==200) return
        this.comments=res.data.data
        // 转换时间格式
        this.comments.forEach(item=>{
          item.createdTime=this.rTime(item.createdTime)
        })
        var use=JSON.parse(localStorage.getItem('user'))
        if(use){
          this.user.user_id=use.id
          this.user.nikiname=use.nikiname
        }else{
          this.user.user_id=''
          this.user.nikiname=''
        }
      })
    },
    // 点击按钮，发表评论
    fabiao(){
      if(this.user.user_id=='') return this.$message.error('未登录，')
      if(this.user.input.trim()==''){
        this.user.input=''
        this.$message.error('发表内容不能为空')
      }else{
        this.$axios.get('/setcomment',{params:{
          user_id:this.user.user_id,
          article_id:this.detaillist.id,
          content:this.user.input,
          nikiname:this.user.nikiname
        }}).then(res=>{
          if(res.data.meat.status!==200) return this.$message.error('发表失败')
          this.getcomments(this.detaillist.id)
          this.user.input=''
        })
      }
      
    },
    // 点击按钮删除评论
    deletecomment(id){
      this.$axios.delete('/deletecomment',{params:{id}}).then(res=>{
        this.getcomments(this.detaillist.id)
      })
    },
    // 转换时间格式
    rTime(date) {
        var json_date = new Date(date).toJSON();
        return new Date(+new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 获取当前作者的其他文章
    getauthororder(author){
      this.$axios.get('/getauthororder',{params:{author:author}}).then(res=>{
        console.log(res)
        this.authororder=res.data.data
      })
    },
    // 进入文章详情页
    detailid(id){
        
        this.$router.push({
          name:'detail',
          params:{
            pageid:id
          }
        })
    }
  },
  created(){
      this.getdetail()
  },
  watch:{
        '$route'(to,form){
        this.getdetail()
    }
  }
}
</script>

<style lang="less" scoped>
.tops{
  margin-top: 100px;
}
.w{
  width:1000px;
  margin:0 auto;
}
.content_si{
  display: flex;
  font-size: 12px;
  p{
    margin-right: 30px;
    i{
      font-weight: 800;
      margin-right: 4px;
    }
  }
}
.content_p{
  line-height: 30px;
  text-indent: 2em;
  margin-top: 20px;
  font-size: 14px;
  div,p{
    margin: 20px 0;
  }
}
.box-card-labels{
  margin: 30px 0;
  color: #333;
  font-size: 14px;
  span{
    margin-left: 10px;
    color: #999;
  }
}
.mar_con{
  display: flex;
  justify-content: space-between;
}
.text{
  display: flex;
  justify-content: space-between;
  margin: 30px 0;
}
.pl{
  display: flex;
  width: 100%;
  margin: 30px 0;
  .pl_1{
    flex:1;
    input{
      width: 100%;
    }
  }
}
.contents_comments{
  font-size: 12px;
  margin-top:10px;
  word-break:break-all
}
.mar_bot{
  margin-bottom: 30px;
}
.right_img{
  display: flex;
  .right_title{
    font-size: 14px;
    .right_title_1{
      margin: 0 20px;
      padding: 0;
      span{
        margin-right: 14px;
      }
      i{
        font-weight: 900;
      }
    }
  }
}
.right_zp{
  display: flex;
  margin-top: 20px;
  align-items: center;
  width: 100%;
  div p{
    margin:0 20px;
    padding: 0;
    font-size: 12px;
    color: #999;
  }
  .el-button{
    margin-left: 40px;
  }
}
.marting_top{
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.author{
  .titles{
    font-weight: 900;
  }
  .text{
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    p{
      margin: 0;
      span:nth-child(1){
        margin-right: 40px;
      }
    }
  }
}
</style>
